<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>

        // 箭头函数本身没有this ，它里面去写this 其实就是在拿函数外面的this对象。

        // function fn(){
        //     console.log(this);
        // }
 
        // fn(); //window

        // let fn = ()=>{
        //     console.log(this);
        // }

        // fn(); //window


        // let obj = {
        //     fn1:function(){
        //         console.log("function",this);
        //     },
        //     fn2:()=>{
        //         console.log("箭头函数",this);
        //     }
        // };

        //function定义的函数 = 谁调用它，this就是谁
        // obj.fn1(); //{fn1: ƒ, fn2: ƒ}

        //箭头函数 = 函数在哪定义的，this就是谁
        // obj.fn2(); //window


        // function 内的this是指调用者
        // 箭头函数本身没有this，它内部的this指的其实是外层this。
        let obj2 = {
            fn:function(){

                let _this = this;
                console.log("fn下的",this);
                // 箭头函数 -> fn函数之内定义的
                // fn函数现在的this是谁？
                let subFn = ()=>{
                    console.log("sub箭头函数",this);

                    console.log(_this == this);
                }
                subFn();
            },
            fn2:function(){

                console.log("fn2",this);
                // 普通函数 - 谁调用了 this就是谁
                function subFn2(){
                    console.log("subFn2",this);
                }

                // window
                // subFn2();

                // 改变this指向
                subFn2.call(obj2); //{fn: ƒ, fn2: ƒ}

                // fn2.subFn2
            }
        }


        // obj2.fn()

        obj2.fn2()



    </script>
</body>
</html>